<template>
  <app-container>
    <app-block>
      <zm-form :model="searchForm" ref="searchForm" inline>
        <zm-form-item prop="number">
          <zm-input class="w400" v-model="searchForm.number" placeholder="输入销售单号/销售单名称/回款计划编号搜索" />
        </zm-form-item>
        <zm-form-item label prop="salesmanId">
          <zm-data-select v-model="searchForm.salesmanId" api="getSaleList" placeholder="所属业务员" class="w200"></zm-data-select>
        </zm-form-item>
        <zm-form-item label prop="apartmentId">
          <el-cascader placeholder="所属部门" :props="props" v-model="apartmentId" :options="apartmentList" clearable class="w200" @change="apartmentChange"></el-cascader>
        </zm-form-item>
        <zm-form-item label prop="productType">
          <zm-data-select v-model="searchForm.productType" k1="productType" placeholder="产品类型" class="w200" multiple str></zm-data-select>
        </zm-form-item>
        <zm-form-item prop="endTime">
          <zm-date-picker :target="searchForm" start-key="startTime" end-key="endTime" start-placeholder="签单开始日期" end-placeholder="签单结束日期" />
        </zm-form-item>
        <zm-form-item label prop="saleOrderType">
          <zm-data-select v-model="searchForm.saleOrderType" k1="saleOrderType" placeholder="销售单类型" class="w200" @change="resetReceiptStatus"></zm-data-select>
        </zm-form-item>
        <zm-form-item label prop="customerType">
          <zm-data-select v-model="searchForm.customerType" k1="customerType" placeholder="客户类型" class="w200"></zm-data-select>
        </zm-form-item>
        <zm-form-item label prop="tradeType">
          <zm-data-select v-model="searchForm.tradeType" api="getDictList" :params="{ type: 'tradeType' }" multiple str placeholder="客户所属行业" class="w200"></zm-data-select>
        </zm-form-item>
        <zm-form-item label prop="productId">
          <zm-data-select v-model="searchForm.productId" api="getProductList" placeholder="销售产品" class="w200"></zm-data-select>
        </zm-form-item>
        <zm-form-item>
          <zm-button @click="onSearch" t="search"></zm-button>
          <zm-button @click="onReset" t="reset"></zm-button>
        </zm-form-item>
        <div>
          <zm-form-item label="订单状态:" prop="orderStatus">
            <zm-data-radio is-btn has-all :list="orderStatusList" v-model="searchForm.orderStatus" @change="onSearch" />
          </zm-form-item>
        </div>
        <div>
          <zm-form-item label="回款状态:" prop="payStatus">
            <zm-data-radio is-btn has-all k1="payStatus" v-model="searchForm.payStatus" @change="onSearch" />
          </zm-form-item>
        </div>
        <div>
          <zm-form-item label="附件状态:" prop="">
            <zm-data-radio is-btn v-model="searchForm.uploadStatus" :list="uploadStatusList" @change="onSearch" />
          </zm-form-item>
        </div>
        <div v-if="searchForm.saleOrderType === '1' || searchForm.saleOrderType === '2'">
          <zm-form-item label="回执状态:" prop="">
            <zm-data-radio is-btn v-model="searchForm.receiptStatus" :list="receiptStatusList" @change="onSearch" />
          </zm-form-item>
        </div>
      </zm-form>
    </app-block>
    <app-block>
      <div class="mb10">
        <zm-button type="warning" @click="onGetFields"> 导出 </zm-button>
        <zm-export ref="export" :api="exportApi()" type="warning" :params="exportForm" v-show="false"></zm-export>
        <div class="dib">
          <zm-button size="mini" @click="onUpLoad">上传</zm-button>
          <zm-upload ref="zmUpload" v-show="false" :http-request="fileUpload" accept=".rar,.zip,.doc,.docx,.pdf,.png,.jpg,.pptx" :limit="1" :single-file-size="5">
          </zm-upload>
        </div>
        <div class="dib">
          <zm-button size="mini" @click="onDownLoad">下载</zm-button>
          <zm-enclosure ref="zmEnclosure" v-show="false" :file-url="enclosureUrl"></zm-enclosure>
        </div>
      </div>
      <zm-table-data :data="tableParams.data" ref="multipleTable" :columns="dataColumns" :fetch="loadList" :table-params="tableParams" :mutilple="true" config-header :store-key="SOTRE_KEY_FINANCIAL_RECEIVABLE_LIST" @selection-change="saveIds" :head-min="5" :head-max="15"></zm-table-data>
    </app-block>
    <detail-receivable v-if="detailParams.visible" v-model="detailParams.visible" :obj="detailParams.obj" @after="loadList"></detail-receivable>
    <detail-container v-if="extendDetailParams.visible" v-model="extendDetailParams.visible" :id="extendDetailParams.id" :business-id="extendDetailParams.id" :is-show-btn="false" :type="extendDetailParams.type"></detail-container>
    <export-panel :api="exportField()" v-if="exportParams.visible" v-model="exportParams.visible" @after="onExport" type="6"></export-panel>
    <down-type v-if="showDownTypeParams.visible" v-model="showDownTypeParams.visible" :params="showDownTypeParams.params"></down-type>
  </app-container>
</template>

<script>
import tableMixin from '@/mixins/zmTableMixin'
import {
  getPlanPageList,
  exportList,
  exportField
} from '@/api/src/returnedPlan'
import { apartmentList } from '@/api/src/public'
import { columns, base, uploadStatusList, receiptStatusList } from './const'
import DetailReceivable from './detail'
import DetailContainer from '@/components/DetailContainer'
import ExportPanel from '@/components/exportFields'
import { SOTRE_KEY_FINANCIAL_RECEIVABLE_LIST } from '@/model/tableStoreKey'
import { getBaseData } from '@/utils/store'
import ZmUpload from '@/components/ZmUpload/components/main'
import { saveVoucher, downloadFile } from '@/api/src/returnedMoney'
import uploadApis from '@/api/src/upload'
import DownType from './components/DownType'

export default {
  name: 'Receivable',
  components: { DetailReceivable, ExportPanel, DetailContainer, ZmUpload, DownType },
  mixins: [tableMixin],
  props: {
    props: {
      type: Object,
      default () {
        return {
          label: 'name',
          value: 'value',
          children: 'children'
        }
      }
    }
  },
  data () {
    return {

      selectedNos: '',
      SOTRE_KEY_FINANCIAL_RECEIVABLE_LIST,
      uploadStatusList,
      receiptStatusList,
      searchForm: {
        orderStatus: '-1',
        payStatus: '-1',
        number: '',
        salesmanId: '',
        productType: '',
        startTime: '',
        endTime: '',
        apartmentId: '',
        saleOrderType: '',
        customerType: '',
        tradeType: '',
        productId: '',
        uploadStatus: '-1',
        receiptStatus: '-1'
      },
      apartmentId: [],
      apartmentList: [],
      detailParams: {
        visible: false,
        obj: {}
      },
      extendDetailParams: {
        visible: false,
        id: '',
        businessId: '',
        type: ''
      },
      exportForm: {},
      exportParams: { visible: false },
      enclosureUrl: '',
      showDownTypeParams: {
        visible: false,
        params: {}
      },
      selectedSaleOrderTypeIds: ''
    }
  },
  computed: {
    dataColumns() {
      return columns(this)
    },
    orderStatusList () {
      let list = getBaseData()
      return list.orderStatus.filter((item) => {
        return item.value !== '4'
      })
    }
  },
  watch: {},
  created () {
    this.getApartmentList()
  },
  methods: {
    exportApi () {
      return exportList
    },
    exportField () {
      return exportField
    },
    async getApartmentList () {
      this.apartmentList = await apartmentList()
      console.log(this.apartmentList)
    },
    apartmentChange () {
      this.searchForm.apartmentId = this.apartmentId[(this.apartmentId.length - 1)]
    },
    onReset () {
      if (this.$refs.searchForm) {
        this.$refs.searchForm.resetFields()
        this.apartmentId = []
        this.searchForm.startTime = ''
        this.onSearch()
      }
    },
    resetReceiptStatus () {
      this.searchForm.receiptStatus = '-1'
    },
    async loadList () {
      console.log(this.searchForm, 'this.searchForm')
      const _res = await getPlanPageList(this.assignQuery(this.searchForm))
      this.initialTableData(_res.list, _res.count)
    },
    saveIds (selection, row) {
      // 保存已选
      this.selectedNos = selection.map((item) => item.id).join(',')
      this.selectedSaleOrderTypeIds = selection.map((item) => item.type).join(',')
    },
    onGetFields () {
      this.exportParams = {
        visible: true
      }
    },
    onExport (fields) {
      this.exportForm = {
        ...this.searchForm,
        ...{ ids: this.selectedNos },
        ...{ fields: fields }
      }
      this.$refs.export.onExport()
    },
    onDetail (row) {
      this.detailParams = {
        visible: true,
        obj: row
      }
    },
    onExtendShow (id, type) {
      this.extendDetailParams = {
        visible: true,
        id: id,
        businessId: id,
        type: type
      }
    },
    onUpLoad () {
      if (!this.selectedNos) {
        this.$message.warning('请先选择数据')
        return
      }
      this.$refs.zmUpload.handelChoose()
    },
    async fileUpload (data) {
      let params = new FormData()
      params.append('fileData', data.file)
      const res = await uploadApis.uploadFile(params)
      const _data = {
        id: this.selectedNos,
        enclosureUrl: res.url,
        enclosureName: res.name
      }
      await saveVoucher(_data)
      return res.url
    },
    async onDownLoad () {
      if (!this.selectedNos) {
        this.$message.warning('请先选择数据')
        return
      }

      console.log(this.selectedSaleOrderTypeIds, 'this.selectedSaleOrderTypeIds')
      let params = { ...this.searchForm, orderId: this.selectedNos, saleOrderType: this.selectedSaleOrderTypeIds }
      this.showDownTypeParams = {
        visible: true,
        params: params
      }
      /* let params = {
        id: this.selectedNos
      }
      // 获取下载链接
      const res = await downloadFile(params)
      this.enclosureUrl = res.url
      this.$nextTick(() => {
        this.$refs.zmEnclosure.toDownload()
      }) */
    }
  }
}
</script>

<style scoped lang="scss"></style>
